<template>
<section>
    <el-form :model="user" label-width="80px" :rules="editFormRules" ref="editForm" style="margin-left:10%;">
        <el-form-item label="账号" prop="userAccount">
            <el-input v-model="user.userAccount" auto-complete="off" readonly="readonly" style="width:40%;"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
            <el-input v-model="user.userName" auto-complete="off" readonly="readonly" style="width:40%;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
            <el-input type="password" v-model="user.userPassword" style="width:40%;"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="userPasswordRepeat">
            <el-input type="password" v-model="user.userPasswordRepeat" style="width:40%;"></el-input>
        </el-form-item>
        
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-left:16.5%;">
        <el-button type="primary" @click.native="editSubmit" style="width:40%;margin-left:auto; margin-right:auto;margin-top:20px;">提交</el-button>
    </div>

</section>
</template>

<script>
import util from "@/common/js/util";
import {
    mapGetters
} from "vuex";
//import NProgress from 'nprogress'
import * as api from "@/api/api.js";
import {
    parse
} from "path";

export default {
    data() {
        return {
            sexs: [{
                    value: "1",
                    label: "男"
                },
                {
                    value: "0",
                    label: "女"
                }
            ],
            showUrl: api.showUrl,
            user: {},
            listLoading: false,
            uploadFileUrl: api.uploadFileUrl,
            editFormRules: {
                userName: [{
                    required: true,
                    message: "请输入姓名",
                    trigger: "blur"
                }],
                userPassword: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur"
                }],
                userPasswordRepeat: [{
                    required: true,
                    message: "请重复输入密码",
                    trigger: "blur"
                }]
            },
            editForm: {}
        };
    },
    computed: {
        ...mapGetters("user", ["getUser"])
    },
    methods: {
        //获取用户信息
        queryUserById() {
            let para = {
                userId: this.getUser.userId
            };
            this.listLoading = true;
            //NProgress.start();
            api.queryUserById(para)
                .then(res => {
                    if (res.returnObj) {
                        res.returnObj.userPassword = "";
                        this.user = Object.assign({}, res.returnObj);
                    }
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        //编辑
        editSubmit: function () {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        //NProgress.start();
                        let para = Object.assign({}, this.user);
                        para.userStatus = "1";
                        if ((this.user.userPassword || this.userPasswordRepeat) && this.user.userPasswordRepeat != this.user.userPassword) {
                            this.$message({
                                message: "两次输入的密码不一致",
                                type: "error"
                            });
                            return;
                        }

                        api.updateUser(para)
                            .then(res => {
                                //NProgress.done();
                                if (res.message == 'success') {
                                    this.$message({
                                        message: "修改成功，请重新登录",
                                        type: "success"
                                    });
                                }
                                this.$refs["editForm"].resetFields();
                                this.editFormVisible = false;
                                this.$router.push({
                                    path: "/login"
                                });
                            })
                            .catch(() => {});
                    });
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.user.headImgPath = res.returnObj;
            this.$forceUpdate();
            console.log(file);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
    mounted() {
        this.queryUserById();
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
